<!DOCTYPE html>
<html>
<head>
	<style>
		#map-canvas{
			width: 600px;
			height: 600px;
		}
	</style>
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" ></script>
	<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" ></script>
	
	<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
	<script>
		var map;
		var markersArray = [];
		var markerClusterer;
		function initialize() {
			var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
			var mapOptions = {
				zoom: 4,
				center: myLatlng,
				mapTypeId: google.maps.MapTypeId.ROADMAP
				}
			map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
			console.log("HEy");
		}
		function clearOverlays() {
			if (markersArray) {
				for (i in markersArray) {
					markersArray[i].setMap(null);
					markerClusterer.clearMarkers();
					markerClusterer.redraw();
					console.log("cleared");
				}
			}
		}
		function createMarkerClusterer(){
			
		}
		function xmlToJson(xml) {
	
			// Create the return object
			var obj = {};

			if (xml.nodeType == 1) { // element
				// do attributes
				if (xml.attributes.length > 0) {
				obj["@attributes"] = {};
					for (var j = 0; j < xml.attributes.length; j++) {
						var attribute = xml.attributes.item(j);
						obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
					}
				}
			} else if (xml.nodeType == 3) { // text
				obj = xml.nodeValue;
			}

			// do children
			if (xml.hasChildNodes()) {
				for(var i = 0; i < xml.childNodes.length; i++) {
					var item = xml.childNodes.item(i);
					var nodeName = item.nodeName;
					if (typeof(obj[nodeName]) == "undefined") {
						obj[nodeName] = xmlToJson(item);
					} else {
						if (typeof(obj[nodeName].push) == "undefined") {
							var old = obj[nodeName];
							obj[nodeName] = [];
							obj[nodeName].push(old);
						}
						obj[nodeName].push(xmlToJson(item));
					}
				}
			}
			return obj;
		};
		$(document).ready(function() {
			initialize();
			function getLocations() {
				$.ajax({
					type: "GET",
					url: "http://localhost/test/bigpipe2.kml",
					dataType: "xml",
					success: function(xml){
						console.log("xml", xml);
						var json = xmlToJson(xml);
						console.log("json", json);
						var points = json["kml"]["Document"]["Placemark"];
						//var points = JSON.parse(json);
						var icon = json["kml"]["Document"]["Style"][1]["IconStyle"]["Icon"]["href"]["#text"];
						console.log(icon);
						var image = {
							url : icon
						};
						console.log(points);
						markersArray = [];
						for (var i=0; i<points.length;i++) {
							console.log(i, points[i]);
							var tmp = points[i]["Point"]["coordinates"]["#text"];
							var xy = tmp.replace('"', '').split(",");
							//var title = points[i].title;
							var latitude = parseFloat(xy[1]);
							var longitude = parseFloat(xy[0]);
							//var link = points[i].link;
							var myLatlng = new google.maps.LatLng(latitude, longitude);
							var marker = new google.maps.Marker({
								position: myLatlng,
								map: map,
								//title:title,
								//link:link,
								icon: image,
								animation: google.maps.Animation.DROP,
							});
							console.log("marker", marker);
							//map.setZoom(8);
							//map.panTo(marker.position);
							markersArray.push(marker);
							
						}
						
						console.log("markersArray", markersArray);
								
						markerClusterer = new MarkerClusterer(map, markersArray);
						console.log("markerClusterer", markerClusterer);
					},
					error: function(err){
						console.log(err);
					}
				});
			
			}
			
			$( "#slider" ).slider({
				stop: function( event, ui ) {
					console.log("meme", $(this).val());
					if ($(this).val() == "off")
					{
						clearOverlays();
						
					}
					if ($(this).val() == "on")
					{
						clearOverlays();
						
					}
			  }
			});
			getLocations();
			
		});
	
				
	</script>
</head>
<body>
	<label for="slider">Flip switch:</label>
	<select name="slider" id="slider" data-role="slider">
		<option value="off">Off</option>
		<option value="on" selected = "true">On</option>
	</select>
    <div id="map-canvas"></div>
</body>
</html>